import React, { Component } from 'react';
import '../App.less';
import  '../css/Submit.less'
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import  axios from  'axios'
import { Picker,RadioItem,Icon} from 'antd-mobile';
import  Footer  from  './Footer'
@observer class Submit extends Component {
    constructor(props) {
        super(props)
        this.state = {
            pickerValue: [],
            show:true,
            lingyu:'',
            trueLingYu:'',
            test:[],
            ToGrantAuthorization:'',
            Reading:'',
            Sum:2000,
            ArticleInformation:''
        }
    }
    componentDidMount(){
        Mobx.history= this.props.history
        this.setState({
            show:false
        })
        axios.get('http://www.niuduxiu.com/pc/creativityType/getCreativityType.jhtml')
            .then((item)=>{
                this.setState({
                    test:item.data.data
                })
            })
    }
    change(){
        setTimeout(()=>{
            this.state.test.map((item)=>{
                if(item.value===this.state.pickerValue[0]){
                    item.children.map((item1)=>{
                       if(item1.value==this.state.pickerValue[1]){
                           this.setState({
                               lingyu:item1.label,
                               show:false
                           })
                       }
                    })
                }
            })
        },500)
    }
    Focus(){
        this.setState({
            show:true,
        })
    }
    ChangeToGrantAuthorization(e){
        console.log(e.target.value)
       this.setState({
           ToGrantAuthorization:e.target.value
       },()=>{
           console.log(this.state.ToGrantAuthorization)
       })
    }
    changeArticleInformationDaoshi(){
        this.setState({
            ArticleInformation:1
        })
    }
    changeArticleInformationtuandui(){
                  this.setState({
                      ArticleInformation:2
                  })
    }
    read(event){
        this.setState({
            Reading:event.target.value,
        },()=>{
            this.setState({
                Sum:2000-this.state.Reading.length
            })
        })
    }
    render() {
        return (
            <div className='App'>
                 <Footer />
                <div className="Submit">
                        <div className='SubmitHeader'>
                            <p>上传作品</p>
                            <p><span>（ 带橙点为必填/必选项 ）</span></p>
                        </div>
                        <div className='SubmitContent'>
                            <p className='titleName'>请输入创意名称</p>
                            <p className='input'>
                                <input type="text" placeholder='请输入您的作品名称' />
                                <span className='right'>20</span>
                            </p>
                            <p className='titleName'>领域类型</p>
                            <p className='input'>
                                <input type="text" placeholder='请选择' onMouseDown={this.Focus.bind(this)}  value={this.state.lingyu} readOnly />
                                <span className='right'> > </span>
                            </p>
                            <p className='titleName'>授权</p>
                            <p className='input'>
                                <select defaultValue='this.state.ToGrantAuthorization' onChange={this.ChangeToGrantAuthorization.bind(this)}
                                    className='shengluehao'
                                >
                                    <option value="1">禁止匿名转载；禁止商业使用；禁止个人使用。</option>
                                    <option value="2">禁止匿名转载；禁止商业使用；</option>
                                    <option value="3">不限制作品用途</option>
                                </select>
                            </p>
                            <p className='titleName'>活动</p>
                            <p className='input'>
                                <select defaultValue='this.state.ToGrantAuthorization' onChange={this.ChangeToGrantAuthorization.bind(this)}
                                        className='shengluehao'
                                        disabled
                                >
                                    <option value="0">不参加活动</option>
                                </select>
                            </p>
                            <p className='titleName'>作品解读</p>
                            <div className='ReadingParent'>
                                 <textarea value={this.state.Reading} onChange={this.read.bind(this)} maxLength={2000} placeholder='请输入作品解读'></textarea>
                                 <span>{this.state.Sum}</span>
                            </div>
                            <p className='titleName'>文章信息</p>
                            <div className='ArticleInformation' >
                                 <p onClick={this.changeArticleInformationDaoshi.bind(this)}>导师
                                     <Icon  type="check" size={'sm'} className='img' style={{display:this.state.ArticleInformation==1?'block':'none'}} />
                                 </p>
                                 <p onClick={this.changeArticleInformationtuandui.bind(this)}>团队
                                     <Icon  type="check" size={'sm'} className='img'  style={{display:this.state.ArticleInformation==2?'block':'none'}} />
                                 </p>
                            </div>
                            <p className='input'>
                                <input type="text" placeholder='请输入您的导师或团队名称' />
                            </p>
                            <p className='titleName'>学校</p>
                            <p className='input'>
                                <input type="text" placeholder='请输入您的学校名称' />
                            </p>
                            <p className='titleName'>上传封面</p>
                            <div className='SubmitPhoto'>
                                <div className="left">
                                    <p>支持jpg/jpeg/gif/png格式，RGB模式，不超过5M，长小于8000, 宽小于2000</p>
                                    <p>注：推荐尺寸为300x420</p>
                                </div>
                                <div className='right'>
                                    <img src={require('../img/submit.png')} alt=""/>
                                </div>
                            </div>
                            <p className='titleName'>上传图片</p>
                            <div className='SubmitPhoto'>
                                <div className="left">
                                    <p>支持jpg/jpeg/gif/png格式，RGB模式，不超过5M，长小于8000, 宽小于2000</p>
                                    <p>注：不超过100张，支持批量上传。</p>
                                </div>
                                <div className='right'>
                                    <img src={require('../img/submit.png')} alt=""/>
                                </div>
                            </div>
                            <p className='button'>发布</p>
                        </div>
                            <Picker
                                visible={this.state.show}
                                data={this.state.test}
                                value={this.state.pickerValue}
                                onChange={v => this.setState({ pickerValue: v })}
                                onOk={this.change.bind(this)}
                                onDismiss={() => this.setState({ show: false })}
                                style={{background:'none;z-index:11'}}
                                cols={2}
                            >
                            </Picker>
                    </div>
            </div>
        );
    }
}

export default Submit;
